<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title th:replace="${title}">模板</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
  <link href="../static/css/me.css" rel="stylesheet" th:href="@{/css/me.css}">
  <link rel="stylesheet" href="../static/css/other.css" th:href="@{/css/other.css}">
  <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
  <link rel="stylesheet" href="../static/lib/prime/prism.css" th:href="@{/lib/prime/prism.css}">
  <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
  <!--<link rel="stylesheet" href="../static/css/app.css" th:href="@{/css/app.css}">-->
  <link rel="stylesheet" href="../static/css/style.min.css" th:href="@{/css/style.min.css}">
</head>
<body>

<nav th:fragment="menu(n)">
  <div class="gird-header" style="opacity: 0.85 !important;">
    <div class="ui container" style="width: 95%!important;"> <!-- 加一个容器 -->
      <div class="ui inverted secondary stackable menu"> <!-- 菜单 stackable:可堆叠的,表示屏幕小时自动堆叠-->
        <a th:href="@{/index}"><h2 class="ui white header item">GuideSystem</h2></a> <!-- 蓝绿色标题 -->
        <a href="#" th:href="@{/index}" class="m-item m-mobile-hide item" th:classappend="${n==1} ? 'active' "><i
            class="home icon"></i>首页</a> <!-- icon表示图表 -->
        <a href="forum.html" th:href="@{/forum}" class="m-item m-mobile-hide item"
           th:classappend="${n==2} ? 'active' "><i class="comments icon"></i>论坛</a>
        <a href="#" th:href="@{/types/-1}" class="m-item m-mobile-hide item" th:classappend="${n==3} ? 'active' "><i
            class="idea icon"></i>分类</a>
        <a onclick="requestLogin(this)" class="m-item m-mobile-hide item" th:classappend="${n==4} ? 'active' "><i
            class="info icon"></i>我的</a>
        <div class="right item m-item"> <!-- 靠右 -->
          <form name="search" method="get" action="#" th:action="@{/search}" target="_blank">
            <div class="ui icon input">
              <input type="text" name="query" placeholder="输入关键字..." th:value="${query}">
              <i onclick="document.forms['search'].submit()" class="search link icon"></i>
            </div>
          </form>
        </div>
        <div style="margin-top: 1.5em">
          <a href="#" th:href="@{/login}" style="font-size: 16px; color: #1ab7ea">
            <p class="m-inline-block">登录</p>
          </a>&nbsp;
          <a href="#" th:href="@{/register}" style="font-size: 16px; color: #1ab7ea">
            <p class="m-inline-block">注册</p>
          </a>
        </div>
      </div>
    </div>
    <a href="#" class="ui menu toggle black button icon m-top-right m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </div>
</nav>

<footer class="ui inverted vertical segment m-padded-tb-massive footer-class"
        style="position: relative; width: 100%; height: 310px; opacity: 0.85; background-color: rgba(0, 0, 0, 1);">
  <!-- vertical:垂直的 segment:条横 inverted:倒置的 -->
  <div class="ui center aligned container"> <!-- center aligned:居中 aligned:使成为一条线-->
    <div class="ui inverted divided stackable grid"> <!-- inverted divided grid:格线分成16份 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">消费者维权</h4>
        <div class="ui inverted link list">
          <a href="https://www.12377.cn/" class="item m-text-thin" target="_blank">中国互联网举报中心</a>
          <a href="https://www.12389.gov.cn/" class="item m-text-thin" target="_blank">公安部举报中心</a>
          <a href="https://www.beian.gov.cn/portal/index.do" class="item m-text-thin"
             target="_blank">全国互联网安全服务平台</a>
        </div>
      </div>

      <!-- 分成三列 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">服务</h4>
        <div class="ui inverted link list">
          <a href="#" class="item m-text-thin">广告推广</a>
          <a href="#" class="item m-text-thin">技术支持</a>
          <a href="#" class="item m-text-thin">合作/招聘</a>
        </div>
      </div>

      <!-- 分成三列 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">联系我</h4>
        <div class="ui inverted link list">
          <span class="item m-text-thin" style="height: 28px">邮箱: 1923326384@qq.com</span>
          <span class="item m-text-thin">QQ: 1923326384</span>
        </div>
      </div>

      <!-- 分成七列 -->
      <div class="seven wide column">
        <h4 class="ui inverted header m-text-thin">关于我们</h4>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">
          此系统旨在联合全国各大高校、教育考试院、教育厅等，将研究生录取相关信息全面化、公开化、透明化，减少考生在搜寻资料上遇到的麻烦，
          切实提高信息捕获效率，使考生能树立可行的目标，明确方向，提高上岸成功率！
        </p>
      </div>

    </div>
    <div class="ui inverted section divider"></div>
    <p class="m-text-thin m-text-spaced m-opacity-tiny">版权 @ 2024-03-18 设计 软件214项目组</p>
  </div>
</footer>

<!--未登录提示框-->
<div th:fragment="noLogin" class="ui basic modal">
  <div class="ui icon header">
    <i class="users icon"></i>
    用户登录
  </div>
  <div class="content">
    <p>你还没有登录账号，无法使用该功能哦！</p>
    <p>现在去登录吧~</p>
  </div>
  <div class="actions">
    <div class="ui red basic cancel inverted button">
      <i class="remove icon"></i>
      取消
    </div>
    <div class="ui green ok inverted button" id="loginButton">
      <i class="checkmark icon"></i>
      确认
    </div>
  </div>
</div>

<th:block th:fragment="script">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.3/jquery.scrollTo.min.js"></script>
  <script src="../static/lib/prime/prism.js" th:src="@{/lib/prime/prism.js}"></script>
  <script src="../static/lib/tocbot/tocbot.js" th:src="@{/lib/tocbot/tocbot.js}"></script>
  <!--<script src="../static/js/app.js" th:src="@{/js/app.js}"></script>-->
  <script src="../static/js/main.min.js" th:src="@{/js/main.min.js}"></script>
  <script src="../static/js/perfect-scrollbar.min.js" th:src="@{/js/perfect-scrollbar.min.js}"></script>
  <script>

      window.addEventListener('resize', function () {
          let myDiv = document.getElementById('contentDiv');
          if (myDiv.clientHeight < 635) {
              myDiv.style.height = '635px';
          } else {
              // 如果之前已经设置了固定的550px高度，这里可以取消设置以恢复原始高度
              myDiv.style.height = '';
          }
      });

      $('#toTop-button').click(function () {
          $(window).scrollTo(0, 500);
      });

      function requestLogin(button) {
          $('.ui.basic.modal').modal('show');

          $('#loginButton').on('click', function () {
              window.location.href = '/dev/login'; // 跳转到登录页面，这里的URL根据实际情况替换
          });
      }

      // 页面加载完成后执行一次检查
      (function () {
          let myDiv = document.getElementById('contentDiv');
          if (myDiv.clientHeight < 635) {
              myDiv.style.height = '635px';
          }
      })();

  </script>
</th:block>


</body>
</html>